<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>GpsGate Web Services - Simple Live Group</title>
    
    <script src="http://maps.google.com/maps?file=api&amp;v=2.&amp;key=ABQIAAAAQoA7cjYV3Erx1od1HNJfWRSkX3zeHlDk9eUXlfEjL-txMrh-IBRqvL6La7xJ_e0FliAyIO3y1KHLUg" type="text/javascript"></script> 
	<script type="text/javascript" src="http://localhost:8081/Services/GpsTracking.ashx?xssproxy&appid=6"></script>
	http://localhost:8081/GpsGateServer/VehicleTracker/VehicleTracker.aspx?appid=6
	<script type="text/javascript">
		
		// Group to receive data from
		var groupName = "vehicles";
		var lastUpdated = new Date();
		
		// Get only users online last 60min
		var lastOnlineThreadsHoldMinutes = 60;
		
		// Check for position updates each 10sek
		var updateIntervalMS = 10000;
		
		var userDictionary = [];
		var markerDictionary = [];
		
		var map = null;
		
		function load()
		{
			map = new GMap2(document.getElementById("map"));

			// Add zoom/pan & type controls
			map.addControl(new GSmallMapControl());
			map.addControl(new GMapTypeControl());			
			map.setCenter(new GLatLng(37.4419, 10.1419), 1);
			
			// init the last update time stamp
			lastUpdated.setMinutes(lastUpdated.getMinutes() - lastOnlineThreadsHoldMinutes);
			
			getUsers();	
		}
		
		function getUsers()
		{
			// Get users who has been online last 60min in group 'gpsgate.com' from the server
			GpsGate.Server.MyService.getUpdatedUsersInGroup(groupName, lastUpdated, getUpdatedUsersInGroup_callback);
			
			// Callback function
			function getUpdatedUsersInGroup_callback(result)
			{
				// Set last update to the time when the query was executed on the server
				// this will make next call to only get users with new positions since this call
				lastUpdated = result.queryTimeStamp
				lastUpdated.setMinutes(lastUpdated.getMinutes() -5);
				
				// Iterate through the result of gateUsers
				for(var i = 0; i < result.users.length; i++)
				{
					var user = result.users[i];
					
					// Add user to dictionary
					userDictionary[user.username] = user;
				}
					
				// if we got any new users, repaint the map
				if(result.users.length > 0)
				{
					// Repaint the map with new positions
					repaintMap();
				}
				
				// make a new call to the server in 10sek
				setTimeout(getUsers, updateIntervalMS);
			}
		}
		
		function repaintMap()
		{		
			for(var username in userDictionary)
			{
				// Get the user from dictionary
				var user = userDictionary[username];
				
				// Get the latest position from the user
				var lat = user.trackPoint.position.latitude;
				var lng = user.trackPoint.position.longitude;
				
				// Create a marker
				var point = new GLatLng(lat, lng);
				
				var marker = markerDictionary[username];
				
				if(marker == null)
				{
					marker = new GMarker(point);
					
					// Add InfoWindow when click on marker
					GEvent.addListener(marker, "click",
						GEvent.callbackArgs(marker, function(user)
						{
							var htmlString = "<div class='text'><strong>Username:&nbsp;</strong>" 
											 + user.username 
											 + "<br>"
											 + "<strong>Last updated pos:</strong>"
											 + "<br>"  
											 + user.trackPoint.utc.toLocaleDateString() 
											 + "<br>"
											 + user.trackPoint.utc.toLocaleTimeString();
											 + "</div>";
											
							this.openInfoWindowHtml(htmlString);
						},
						user
					));
					
					markerDictionary[username] = marker;
					map.addOverlay(marker);
				}
				else
				{
					marker.setPoint(point);
				}
			}
		}

	</script>
	
	<style type="text/css">
	<!--
	.text 
	{
		font-family: Verdana, Arial, Helvetica, sans-serif;
		font-size: 10px;
		color: #000000;
	}
	.blue-link
	{
		font-family: Verdana, Arial, Helvetica, sans-serif;
		font-size: 10px;
		color: #466f93;
		text-decoration:none;
	}
	-->
	</style>
</head>
<body onload="load()">
	<div style="border-bottom:solid 1px #466f93; margin-bottom:10px; width:500px" class="text">
		<p>	
			This example displays the users from the public group "GpsGate.com" that have been online the last hour. 
		</p>
	</div>
	<div id="map" style="width:500px; height: 300px"></div>
	<a href="http://gpsgate.com/" id="gpsgate" alt="gpsgate tracking" class="blue-link" target="_blank"><img src="http://apps.gpsgate.com/images/ggc_small.gif" hspace="0" vspace="0" align="texttop" class="blue-link" style="border:none;" /><span class="blue-link"> GPS Tracking</span></a>
</body>
</html>
